<template>
    <teleport to='.indexBox' v-if="show">
        <div class="dailogShade">
            <slot/>
        </div>
    </teleport>
</template>

<script>
export default {
    props:{
        show:Boolean
    },
    setup(props,context) {

        const close = ()=>{
           context.emit('update:show', false)
        }

        return{
            close
        }
    },
}
</script>

<style lang="scss" scoped>
    .dailogShade{
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
        position: absolute;
        z-index: 1000;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.5);
    }
</style>